<template>
  <el-container class="login-one">
    <el-header></el-header>
    <el-main>
      <br> <br> <br> <br> <br>
      <el-row>
        <el-col :span="8">&nbsp;</el-col>
        <el-col :span="8" style="background-color: white;height: 300px;">
          <h3 align="center">
            {{registerForm.title}}
          </h3>
          <el-form ref="form" label-width="80px">
            <br>
            <el-form-item :label="registerForm.accountName">
              <el-col :span="22">
                <el-input :placeholder="registerForm.nameInfo" v-model="userInfo.userName"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item :label="registerForm.pwd">
              <el-col :span="registerForm.num">
                <el-input :placeholder="registerForm.pwdInfo" v-model="userInfo.userPwd" show-password></el-input>
              </el-col>
            </el-form-item>
            <!-- <el-form-item :label="registerForm.verification">
              <el-col :span="registerForm.num">
                <el-input :placeholder="registerForm.verificationInfo"></el-input>
              </el-col>
              <el-col :span="12">
                <el-button type="success" rectangle v-show="registerForm.ok" @click="sendCode" size="mini">发送验证码
                </el-button>
              </el-col>
            </el-form-item> -->

            <div class="login-btn">
              <el-button type="primary" size="mini" round @click="register">注册</el-button>
            </div>

          </el-form>
        </el-col>
        <el-col :span="8">&nbsp;</el-col>
      </el-row>

    </el-main>
  </el-container>
</template>

<script>
  import myUtil from '../../util/myUtil'

  import axios from 'axios'

  export default {
    //name: "register",
    data() {
      return {
        registerForm: {
          title: "欢迎注册人力资源管理系统",
          accountName: "用户名",
          pwd: "密码",
          verification: "验证码",
          nameInfo: "请输入用户名",
          pwdInfo: "请输入密码",
          verificationInfo: "请输入验证码",
          ok: false,
          num: 22
        },
        userInfo: {
          userId: "",
          userName: "",
          userPwd: ""
        }
      }
    },
    methods: {
      registerAccount() { //注册页面
        this.registerForm.title = "欢迎注册人力资源管理系统";
        this.registerForm.accountName = "用户名";
        this.registerForm.pwd = "密码";
        this.registerForm.pwd = "验证码";
        this.registerForm.nameInfo = "请输入用户名";
        this.registerForm.pwdInfo = "请输入密码";
        this.registerForm.verificationInfo = "请输入验证码";
        this.registerForm.ok = false;
        this.registerForm.num = 22;
      },
      register() { //注册
        var mythis = this;
        axios.get(
          myUtil.url + "/user/register", //url地址
          {
            params: mythis.userInfo
          } //请求参数
        ).then(function(rs) {
          console.log(rs)
          alert(rs.data.info);
          mythis.$router.replace("/loginEle");

        })
      },

      sendCode() { //发送验证码
        var mythis = this;
        $.ajax({
          url: myUtil.url + "/user/redisSend",
          type: "post",
          //xhrFields: {withCredentials: true},//允许跨域请求携带cookie值
          data: {
            "email": mythis.userInfo.name
          },
          dataType: "json",
          contentType: "application/x-www-form-urlencoded",
          success: function(data) {
            alert(data.info)
          }

        })

      }
    },
    mounted() {}

  }
</script>

<style>
  html,
  body {
    height: 100%;
  }

  .login-one {
    background-color: #1c77ac;
    background-image: url(../../../static/image/beijing3.png);
    background-repeat: no-repeat;
    /*	//background-position:center top;*/
    overflow: hidden;
    height: 100%;
  }

  .login-btn {
    text-align: center;
  }

  .login-btn button {
    text-align: center;
    width: 400px;
    height: 36px;
  }

  .login-reg {
    text-align: right
  }

  .login-reg button {
    width: 28%;
    height: 26px;
  }
</style>
